Objectifs :

I – Le langage CSS

1) Pourquoi CSS ?

Nous avons vu que HTML est un langage qui décrit à la fois le contenu (le texte brut, les images), le type de contenu (titre, paragraphe, en-tête, citation …) et la présentation (mise en forme, couleur, …). La plupart des sites web utilisent un style de présentation homogène dans tout le site (on parle de charte graphique) et de ce fait les éléments de présentation seront le même sur toutes les pages du site et dans l’intégralité de chaque page.

Dans ce cas, il pourrait être utile de séparer le contenu de la présentation et définir cette dernière une seule fois pour toute la page, voire pour l’ensemble des pages du site. On pourrait ainsi changer facilement le style d’un site ou d’une page en changeant simplement une fois les éléments de présentation.

C’est ce que propose le langage CSS.

2) Qu’est-ce que CSS ?

Les feuilles de style en cascade ou CSS (Cascading Style Sheets) est un langage de description de la présentation d’une page HTML. Il est donc complémentaire de HTML et ne s’occupe que de l’aspect visuel des éléments de la page (la présentation).

Lorsque l’on utilise CSS, il n’est plus nécessaire (et cela n’est d’ailleurs pas recommandé : il vaut mieux l’éviter) de spécifier des éléments de présentation (comme <i>, color = …, etc …) dans le code HTML car c’est CSS qui va prendre en charge l’intégralité de l’aspect visuel.

On sépare ainsi complétement le contenu de la présentation.

Le site CSSgarden propose ainsi une démonstration des possibilités de CSS. Vous pourrez y visualiser le même contenu présenté de plusieurs façons différentes. On peut en effet y changer la présentation en sélectionnant différentes feuilles de style.

Q1 : Aller sur le site de CSSgarden et essayer les différents designs. Quels sont les éléments qui changent et ceux qui ne changent pas ?

Q2 : Afficher le code source de la page pour deux designs différents. Quelles sont les différences dans les deux codes sources ? Cela confirme-t-il la réponse à la question précédente ?

3) Comment utiliser CSS ?

CSS peut être utilisé de 3 manières différentes :

  1. Directement dans le code html en ajoutant un attribut style="…" à une balise. Dans ce cas les instructions ne sont valables que pour la balise en cours.

    2. Ex : <h2 style="text-decoration:underline;">Titre de niveau 2 souligné</h2>

  2. Dans l’en-tête du fichier HTML (déclaré par une balise <style>). Dans ce cas ces instructions sont valables pour toute la page html.

    3. Ex : <head>
    <style>
    h2 { background-color: blue; text-align: left; color: white;}
    </style>
    </head>

  3. Dans un fichier .css dont on donne la référence dans l’en-tête du fichier html. Dans ce cas les instructions sont valables pour toutes les pages qui font référence à ce fichier (souvent pour tout le site).

    4. Ex :

    <head>
    <link href="feuille.css" media="all" rel="stylesheet" type="text/css" />
    </head>
    Le fichier « feuille.css » sera lu et on appliquera les règles CSS s’y trouvant à la page en cours.

On peut utiliser ces 3 méthodes simultanément dans le même document et même définir plusieurs feuilles de style (fichiers .css) pour une même page html.

4) La syntaxe

La syntaxe de CSS est assez simple : il s’agit de définir des règles de représentation pour les divers objets de la page. Ainsi, on doit tout d’abord définir à qui la ou les règles vont s’appliquer (c’est le « sélecteur »), puis on définit chaque règle se rapportant au sélecteur en indiquant la propriété que l’on souhaite fixer et sa (ou ses) valeur(s). La paire propriété/valeur(s) forme une règle.

Comme l’indique l’image ci-contre, on fait suivre le sélecteur de l’ensemble des règles entre accolades. Le nom de la propriété est suivi d’un « : » puis de chaque valeur (séparées par des espaces s’il y en a plusieurs). Chaque règle se termine par un « ; ».